<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <input type="button" value="信息" id="btn1">
    <input type="button" value="成功" id="btn2">
    <input type="button" value="失败" id="btn3">
    <input type="button" value="警告" id="btn4">
    <input type="button" value="默认" id="btn5">
</body>
<script>
    const obtn1 = document.querySelector("#btn1");
    const obtn2 = document.querySelector("#btn2");
    const obtn3 = document.querySelector("#btn3");
    const obtn4 = document.querySelector("#btn4");
    const obtn5 = document.querySelector("#btn5");

    obtn1.onclick = function(){
        alert({
            title:"信息提示",
            type:"info",
            closeType:"click",
            position:"top",
            close:()=>{}
        })
    }
    obtn2.onclick = function(){
        alert({
            title:"成功提示",
            type:"success",
            closeType:"click",
            position:"center",
            close:()=>{
                document.body.style.background = "green";
            }
        })
    }
    obtn3.onclick = function(){
        alert({
            title:"失败提示",
            type:"error",
            closeType:"auto",
            position:"top"
        })
    }
    obtn4.onclick = function(){
        alert({
            title:"警告提示",
            type:"warning",
            closeType:"auto",
            position:"bottom"
        })
    }
    obtn5.onclick = function(){
        alert("默认提示")
    }

    function alert(ops){
        // 处理单例模式的单个实例
        if(!alert.obj){
            alert.obj = {};
            alert.obj.ele = document.createElement("dialog");
            document.body.appendChild(alert.obj.ele)
        }
        // 根据参数类型，处理参数默认值
        if(typeof ops === "string"){
            alert.obj.title = ops,
            alert.obj.type = "default",
            alert.obj.closeType = "auto",
            alert.obj.position = "center"
        }else{
            Object.assign(alert.obj, ops);
        }
        // 弹窗功能
        alert.obj.ele.style.display = "block";
        alert.obj.ele.innerText = alert.obj.title;
        alert.obj.ele.style.position = "fixed";
        let t = alert.obj.position==="top" ? 100 : (alert.obj.position==="center" ? 300 : 600);
        alert.obj.ele.style.top = t + "px";
        if(alert.obj.closeType === "auto"){
            setTimeout(()=>{
                alert.obj.ele.style.display = "none";
                alert.obj.close && alert.obj.close()
            }, 2000)
        }else if(alert.obj.closeType === "click"){
            alert.obj.ele.onclick = function(){
                this.style.display = "none";
                alert.obj.close && alert.obj.close()
            }
        }
        let color = "#ccc";
        switch(alert.obj.type){
            case "info": color = "blue";break;
            case "success": color = "green";break;
            case "error": color = "red";break;
            case "warning": color = "yellow";break;
        }
        alert.obj.ele.style.color = color;
        alert.obj.ele.style.borderColor = color;
    }

</script>
</html>